<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="../js/vue.js"></script>
    <style>
        .img {
            width: 300px;
            height: 300px;
        }

        .static {
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            font-size: 100px;
            color: blue;
        }

        .a {
            background: fuchsia;
        }

        .b {
            border-radius: 50%;
        }

        .c {
            border: 5px solid yellowgreen;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2 :data-title="title">{{ title }}</h2>
        <p>
            <input type="text" v-model.lazy.number.trim="message">
        </p>
        <p>
            message = {{ message }}
        </p>
        <div>
            <textarea v-model="title" placeholder="add multiple lines"></textarea>
        </div>
        <div>
            <input type="checkbox" id="checkbox" v-model="checked">
            <label for="checkbox">请先同意才能继续下一步 {{checked}} </label>
        </div>
        <div>
            <h3>你喜欢的运动是 </h3>
            <input type="checkbox" id="walk" value="walk" v-model="checkedNames">
            <label for="walk">跑步</label>
            <input type="checkbox" id="sleep" value="sleep" v-model="checkedNames">
            <label for="sleep">睡觉</label>
            <input type="checkbox" id="music" value="music" v-model="checkedNames">
            <label for="music">听歌</label>
            <br>
            <span>你喜欢的运动是: {{ checkedNames }}</span>
        </div>

        <div id="example-4">
            <input type="radio" id="man" value="1" v-model="picked">
            <label for="man">男性</label>
            <br>
            <input type="radio" id="woman" value="2" v-model="picked">
            <label for="woman">女性</label>
            <br>
            <span>请选择: {{ picked }}</span>
        </div>
        <div>
            <h2>选择城市是: {{city}} </h2>
            <select v-model="city">
                <option value="">请选择</option>
                <option value="" v-for="(item,index) in list" :key="index" :value="item.code">
                    {{item.city}}
                </option>
            </select>
        </div>
        <div>
            <input type="checkbox" v-model="toggle" :true-value="yes" :false-value="no">
            <p>
                {{toggle}}
            </p>
        </div>
        <div>
            <h2>你喜欢的宠物是: {{pick}} </h2>
            <p>
                <input type="radio" v-model="pick" :value="a">猫
            </p>
            <p>
                <input type="radio" v-model="pick" :value="b">狗
            </p>
            <p>
                <input type="radio" v-model="pick" :value="c">小仓鼠
            </p>
        </div>
    </div>

    <script>
        const vm = new Vue({
            // el:"#app"
            data: {  // 简单数据
                title: 'v-model 用于绑定input 和 textarea的value 输入框',
                message: "Are you ok?",
                checked: true,
                checkedNames: [],
                picked: 1,
                list: [
                    { city: "武汉", code: "WH" },
                    { city: "北京", code: "BJ" },
                    { city: "南京", code: "NJ" },
                    { city: "长沙", code: "CS" },
                    { city: "成都", code: "CD" },
                    { city: "厦门", code: "XM" },
                    { city: "上海", code: "SH" },
                ],
                city: "",
                toggle: true,
                yes: '每天奋斗到凌晨1-2点,熬夜写代码...',
                no: '我每天还是要快乐的刷抖音看小说',
                pick: '',
                a: "cat",
                b: 'dog',
                c: 'mouse'
            },
            watch: {
                title(oldv) {
                    console.log(oldv)
                    document.getElementsByTagName('title')[0].innerHTML = oldv;
                }
            },
            methods: {

            },
            mounted() {
                // 真实DOM
                document.getElementsByTagName('title')[0].innerHTML = this.title;
            },
        }).$mount("#app")

        var user = {
            name: 'yzl',
            age: 18,
        }

        // 订阅某一个值的改变 
        Object.defineProperty(user, 'name', {
            get() {  // 读取值的触发
                console.log('读取当前的 user-name 会触发 === ')

            },
            set(v) {  // 修改值的时候触发
                console.log('最新的name 是 ' + v)
            }
        })

        // document.getElementsByTagName('title')[0].innerHTML = user.name;
    </script>

    <!-- 
        v-model
        v-model  用于绑定 input 和 textarea 的 value  输入框 

        语法糖
       （处理各种业务的逻辑的代码函数的集合）
        它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理


        设计模式 

        MVC        angularJS  
        M  model 数据层
        V  view  视图层
        C  controller 控制器层   


        MVVM   
        M  model 数据层
        V  views 视图层
        VM viewmodel  数据视图对象  


        MVP  
        M  model 数据层
        V  views 视图层
        P  presenter  逻辑层  (js逻辑处理代码+方法)

        
        v-model 实现数据双向绑定
        view  视图层   修改视图(input 事件)  v-model 会自动去更新对应的 数据(model)
        model 数据层   修改数据  通过js修改数据 v-model 会自动的去更新 数据对应的 视图 (view)
        Vue 不是一个真正的MVVM模式的 框架 ,只是借鉴了 MVVM 部分精华和优点


        Vue 数据响应式    (  Object.defineProperty()  )
        v-model 的底层原理   语法糖
        Object.defineProperty()  进行数据劫持  (监听数据改变 从而触发修改视图的逻辑函数)  (监听输入框输入事件 从而修改对应的数据)


        它会根据控件类型自动选取正确的方法来更新元素  
        v-model 本质上不过是语法糖 ( 包含大量逻辑代码块集合)
        负责监听用户的输入事件以更新数据


        text 和 textarea 元素使用 value 属性和 input 事件
        checkbox 和 radio 使用 checked 属性和 change 事件    
        select 字段将 value 作为 prop 并将 change 作为事件   $("#select").prop()


        v-model 也有修饰符 

        lazy    input 变为 change 延迟触发 
        trim    去除首尾空格
        number  用户的输入值转为数值类型


        在组件上使用 v-model ( 精通组件 )
     -->
</body>

</html>